<template>
	<view class="mall-item" @click="onClickToDetail(item.id)">
		<image :src="item.logo" mode="aspectFill" class="mall-item__img"></image>
		<view class="mall-item__desc">
			<text class="mall-item__name">{{item.name}}</text>
			<view class="mall-item__sale flex">
				<text class="mall-item__sale-price">{{item.fee}}</text>
				<text class="mall-item__sale-count">已售{{item.saled}}</text>
			</view>
		</view>

	</view>
</template>

<script setup>
	// import { defineProps } from 'vue';
	const props = defineProps({
		item:Object
	})
	
	function onClickToDetail(id){
		
		uni.navigateTo({
			url:`/pages/index/mall/mallItemDetails/mallItemDetails?id=${id}`
		})
	}
</script>

<style lang="scss" scoped>
	.mall-item{
		width: 326rpx;
		font-size: 28rpx;
		color:#1a1a1a;
		position: relative;
		// margin-bottom: 20rpx;
		&__img{
			display: block;
			width: 326rpx;
			height: 326rpx;
			border-top-left-radius: 10rpx;
			border-top-right-radius: 10rpx;
		}
		
		&__desc{
			width: 100%;
			// box-sizing: border-box;
			// padding: 0 12rpx;
			height: 136rpx;
			background-color: #f8f8f8;
			border-bottom-left-radius: 10rpx;
			border-bottom-right-radius: 10rpx;
		}
		
		&__name{
			width: 280rpx;
			padding-left: 12rpx;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		
		&__sale{
			width: 100%;
			box-sizing: border-box;
			padding: 0 12rpx;
			justify-content: space-between;
			position: absolute;
			bottom: 10rpx;
			&-price{
				color: #fe5100;
			}
			
			&-count{
				font-size: 22rpx;
				color: #909090;
			}
			
		}
	}
</style>